<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
	<title>图表</title>
	<meta name="decorator" content="default" />
	<script src="${ctxStatic}/echarts/echarts.js"></script>
	<script type="text/javascript">
        require.config({
            paths: {
                echarts: '${ctxStatic}/echarts/'
            }
        });
    </script>
    <script type="text/javascript">
    	function showChart(data) {
    		console.log(data);
    		var legend = data.legend;
    		var category = data.category;
    		//var data = [1,2,3,4,5,6];
    		delete data.series[0]["isNewRecord"];
    		delete data.series[1]["isNewRecord"];
    		var series = data.series;
    		// 使用ECharts
            require(
                [
                    'echarts',
                    'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main'), 'macarons'); 
                    
                    var option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                            data: legend
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : category
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : series
                    };
            
                    // 为echarts对象加载数据 
                    myChart.setOption(option); 
                }
            );//end
    	}
    	$(document).ready(function(){
    		$("#inputForm").submit(function(e){
    			console.log($(this).serialize());
    			e.preventDefault();
    			$.post("${ctx}/euler/getChartData",$(this).serialize(),function(data, status){
    				showChart(data);
    			});
    		});         	
    	});
    </script>
</head>
<body>
	<div class="container-fluid">
		<%@ include file="/WEB-INF/views/modules/euler/eulerNav.jsp" %>
		<div class="row-fluid">
	    <div class="span3">
	    <form:form id="inputForm" action="${ctx}/euler/chart">
		  <fieldset>
		    <legend>调整数据</legend>
		    <label>Data:</label>
		    <input type="text" name="data" value="50, 20, 40, 10, 10, 80"/> 
		    <span class="help-block">图中显示的数据.</span>
		    <label>legend:</label>
		    <button id="btnSubmit" type="submit" class="btn btn-primary">提交</button>
		  </fieldset>
		</form:form>
	    </div>
	    <div class="span9">
	     	<div id="main" style="height:400px"></div>
	    </div>
	    </div>
	</div>
</body>
</html>